<template >
  <cube-scroll>
    <cube-swipe>
      <transition-group name="swipe" tag="ul">
        <li class="swipe-item-wrapper" v-for="(data,index) in swipeData" :key="data.item.id">
          <cube-swipe-item
            ref="swipeItem"
            :btns="data.btns"
            :index="index"
            @btn-click="onBtnClick">
            <div class="avatar-frame">
              <div
                class="avatar-frame__avatar"
                :style="avatarStyle"
              >
                {{avatarObj.name[1]}}
              </div>
              <div class="avatar-frame__collective">
                <div class="avatar-frame__title">
                  <span class="avatar-frame__name">一样一样</span>
                  <span class="principal">@负责人</span>
                </div>
                <div class="avatar-frame__tag">
                  <span class="tag">售前</span>
                </div>
              </div>
              <i class="cubeic-more avatar-frame__more" @click="onItemClick(index)"></i>
            </div>
          </cube-swipe-item>
        </li>
      </transition-group>
    </cube-swipe>
  </cube-scroll>
</template>

<script>
import { customData } from './data'
import ddAvatar from '../avatar/avatar'
export default {
  name: 'swipe-group-item',
  data () {
    return {
      swipeData: customData
    }
  },
  computed: {
    avatarObj () {
      return ddAvatar.getAvatar('叶岳林')
    },
    avatarStyle () {
      return {
        background: this.avatarObj.color,
        borderRadius: '24%'
      }
    }
  },
  methods: {
    onItemClick (index) {
      console.log('click index:', index)
      this.$refs.swipeItem[index].grow()
    },
    onBtnClick (btn, index) {
      console.log('click', index)
      console.log('btn', btn)
      if (btn.action === 'delete') {
        this.$createDialog({
          type: 'prompt',
          prompt: {
            value: '',
            placeholder: '请输入'
          },
          onConfirm: (e, promptValue) => {
            this.$createToast({
              type: 'warn',
              time: 1000,
              txt: `Prompt value: ${promptValue || ''}`
            }).show()
          }
        }).show()
      } else {
        this.$refs.swipeItem[index].shrink()
      }
    }
  }
}
</script>

<style scoped>
.avatar-frame{
  position: relative;
  display:flex;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: #323233;
  background-color: #fff;
  padding: 12px;
  border-bottom:1px solid #F6F6F6;
}
.avatar-frame__avatar{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.avatar-frame__collective{
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  max-width: 80%;
  justify-content: center;
}
.avatar-frame__title{
  display: flex;
}
.avatar-frame__name{
  font-size: 16px;
  color:#222222;
  font-weight: bold;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
}
.avatar-frame__title .principal{
  flex: none;
  line-height: 20px;
  font-size: 10px;
  font-weight: normal;
  color:#FF8E3D;
  margin-left: 8px;
}
.avatar-frame__more{
  position: absolute;
  line-height: 60px;
  top: 0;
  right: 16px;
  color:#DDDDDD;
  transform: rotate(90deg);
}
.avatar-frame__tag{
  display: flex;
  align-items: flex-end;
}
.avatar-frame__tag .tag{
  font-size:12px;
  color:#999999;
}
.avatar-frame__tag .tag:after{
  content: "|";
  margin: 0 2px;
}
.avatar-frame__tag .tag:last-child:after{
  content: "";
}
/deep/ .cube-swipe-btn .text {
  padding: 0 18px;
}

/*.swipe-item-wrapper::after{*/
/*  content: '';*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  right:0;*/
/*  width: 84%;*/
/*  height: 1px;*/
/*  background-color: #F6F6F6;*/
/*}*/
</style>
